<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  pageNum: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 0,
  },
})

const pageNum = ref(props.pageNum)

const loding = ref(false)

const emit = defineEmits(['loadMore'])

const handleScroll = () => {
  if (pageNum.value < props.total / props.pageSize) {
    loding.value = true
    pageNum.value += 1
    emit('loadMore', pageNum.value)
  } else {
    loding.value = false
  }
}
</script>

<template>
  <scroll-view class="song-list" scroll-y="true" @scrolltolower="handleScroll">
    <slot></slot>
    <view class="load-more">
      <text v-if="loding">加载中...</text>
      <text v-else>暂无更多</text>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
@import '../../../static/var.scss';
.song-list {
  background-color: $uni-bg-color-grey;
  height: calc(100vh - 44px - 100rpx);

  .load-more {
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    color: $uni-text-color;
  }
}
</style>
